<template>
  <van-form @submit="onSubmit" @failed="onFail" class="form">
    <!-- clearable清除记录 -->
    <van-field
      v-model="form.account"
      left-icon="manager-o"
      clearable
      name="account"
      label="账号信息"
      placeholder="请输入用户名"
      :rules="[{ required: true, message: '请输入用户名' }]"
    />
    <van-field
      v-model="form.password"
      :type="type"
      name="password"
      left-icon="manager-o"
      clearable
      label="登录密码"
      placeholder="请输入登录密码"
      :right-icon="type == 'password' ? 'closed-eye' : 'eye-o'"
      @click-right-icon="changeType"
      :rules="[
        { required: true, message: '请输入登录密码' },
        { pattern: reg.pwd, message: '请输入正确的密码' },
      ]"
    />
    <div style="margin: 36px" class="links">
      <p>
        <router-link class="color1" :to="{ name: 'zhuce' }"
          >没有账号，立即登录</router-link
        >
      </p>
      <p>
        <router-link class="color2" :to="{ name: 'wangjipwd' }"
          >忘记密码</router-link
        >
      </p>
    </div>
    <div style="margin: 16px">
      <van-button block type="info" native-type="submit">登录</van-button>
    </div>
  </van-form>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      type: "password",
    };
  },
  mounted() {
    //接收注册完带过来的username参数
    if (this.$route.query.username) {
      //深拷贝
      this.form = {
        ...this.form,
        account: this.$route.query.username,
      };
    }
  },
  methods: {
    changeType() {
      this.type = this.type == "password" ? "text" : "password";
    },
    onSubmit(values) {
      console.log("submit提交了", values);
      this.$ajax.findUser({
        // ...values,//会显示全部的信息
        password:values.password,
        username:values.account
      })
      .then(res=>{
        if(res.length>0){
          // this.$toast("登录成功")
          // this.ShowSuccess("登录成功")
          //上面两种方法是一个方法
          this.$notify({ type: 'success', message: '登录成功' });

          this.tiao('mine')//登录成功跳转个人中心

          //用户信息存储到vuex
          this.chageUserInfo(res[0])
        }else{
          this.ShowError("用户名或者密码不正确")
        }
      })
    },
    //onFail失败
    onFail(){
      this.$toast("请输入正确的登录信息")
    }
  },
};
</script>
<style lang="scss" scoped>
.form {
  margin-top: 20px;
  .links {
    display: flex;
    justify-content: space-between;
  }
  .color1 {
    color: #0f0;
  }
  .color2 {
    color: #f50;
  }
}
</style>